<template>
  <div>
    <div>【云端报警风险】</div>
    <div ref="target" class="w-full h-full"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineProps, onMounted, watch } from "vue";
import * as echarts from "echarts";
import type { EChartsOption, BarSeriesOption, EChartsType } from "echarts"; // 导入类型
import type { Risks, Risk } from "@/api/types";

const props = defineProps<{
  data: Risks;
}>();
console.log("雷达图", props.data);

//1. 根据DOM 实例，通过echarts.init方法，生成echarts实例
const target = ref<HTMLElement | null>(null);
let mChart: EChartsType;
onMounted(() => {
  mChart = echarts.init(target.value as HTMLElement);
  renderChart();
});

const renderChart = () => {
  if (props.data.risks.length === 0) return;
  const options: EChartsOption = {
    //雷达坐标系
    radar: {
      axisName: {
          color: "#05D5FF",
          fontSize: 14,
      },
      shape: "polygon",
      center: ["50%", "50%"],
      radius: "80%",
      splitNumber: 4,
      startAngle: 120,
      axisLine: {
        lineStyle: {
          color: "rgba(5,213,255,.8)",
        },
      },
      //网格线
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "rgba(5,213,255,.8)",
        },
      },
      indicator: props.data.risks.map((item) => ({
        name: item.name,
        // max: 100,
      })),
      splitArea: {
        show: false,
      },
    },
    //坐标极点
    polar: {
      center: ["50%", "50%"],
      radius: "0%",
    },
    //坐标角度
    angleAxis: {
      min: 0,
      interval: 5, //刻度增长角度
      clockwise: false, //逆时针
    },
    //径向轴
    radiusAxis: {
      min: 0,
      interval: 20,
      splitLine: {
        show: true,
      },
    },
    series: {
      type: "radar",
      symbol: "circle",
      symbolSize: 10,
      itemStyle: {
          color: "#05D5FF",
      },
      areaStyle: {
          color: "#05D5FF",
          opacity: 0.5,
      },
      label: {
          show: true,
          color: '#fff',
      },
      data: [
        {
          value: props.data.risks.map((item) => item.value),
        },
      ],
    },
  };
  //3 .最后通过 实例.set0ption 方法，设置配置对象
  mChart.setOption(options);
};

watch(() => props.data, renderChart);
</script>
<style scoped lang="scss"></style>
